<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container style="height: 100%">
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <btn-row-view @click="detailRef.open(row)" />
      </template>
      <!-- 插槽 -->
    </lg-table>
    <detail ref="detailRef" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { LgTable, useAuth, useTable } from '@/soar';
import schema from './schema';
import api from './api';
import Detail from './Detail.vue';

// 使用表格
const { has } = useAuth();
const detailRef = ref();

const { tableProps } = useTable<any>({
  api,
  props: {
    orderBys: ['-id'],
    selection: false,
    actionbar: {
      width: 60,
    },
  },
});
</script>

<style lang="less" scoped>
:deep(.lg-table-dict) {
  &.dict-value-0 {
    color: var(--app-color-primary);
    border-color: var(--app-color-primary);
  }
  &.dict-value-1 {
    color: var(--td-error-color-7);
    border-color: var(--td-error-color-7);
  }
  &.dict-value-2 {
    color: var(--td-success-color-7);
    border-color: var(--td-success-color-7);
  }
}
</style>
